<style lang='less' scoped>
  .upload{
    position: absolute;
    top: 5px;
    left: 110px;
    margin: 0;
    border-color:#63c5ce;
    color: #63c5ce; 
  }
  a, a:visited, a:link{
    color: #63c5ce; 
  }
 
  .cardIdListBox{
    position: relative;
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: rgb(31, 55, 61);
    line-height: 40px;
    top:-50px;
    height: 100%;
    border: 1px solid rgb(223, 234, 236);
    .cardBox{
      position: relative;
      width: 100%;
      overflow:hidden;
      span{
        width: 25%;
        border: 1px solid rgb(223, 234, 236);
        border-top: none;
        border-left: none;
        float: left;
        box-sizing: border-box;
        text-align: left;
        padding: 0 10px;
      }
    }
    .cardHeadBox{
      border-bottom: 1px solid rgb(223, 234, 236);
      background-color: #edfcfc;
      color: rgb(31, 55, 61);
      font-weight: bold;
    }
  }

  .paginationBox{
    float: right;

  }

  .el-button--primary{
    margin: 40px 0 0 120px;
    width: 200px;
  }

</style>

<template>
  <div class="addCouponPage">

    <el-form :model="formData" :rules="rules" ref="formData" label-width="120px" class="demo-ruleForm">
      <el-form-item label="批量导入兑换卡" prop="upload" >
        <el-upload
          class="upload-demo"
          ref='upload'
          :multiple='multiple'
          :action='postCodeIds'
          :data='formData'
          name='upload_file'
          :headers='headers'
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          :on-success='handleSuccess'
          :on-error='handleError'
          :file-list="fileList">
          <el-button size="small" type="warning">导入</el-button>
          <div slot="tip" class="el-upload__tip">只能上传excel文档，且不超过500kb</div>
        </el-upload>

        <el-button size="small" class="upload">
          <a href="http://olcr5hmc9.bkt.clouddn.com/Card.xlsx" target="_blank">下载模版文档</a>
        </el-button>
      </el-form-item>

    </el-form>

    <div class='cardIdListBox' v-if='showCardIdList.length >1'>
      <div class="cardBox cardHeadBox">序号</div>
      <div class="cardBox">
        <span :key='item' v-for='item in showCardIdList'>{{item}}</span>
      </div>
    </div>

    <div class="paginationBox" v-if='showCardIdList.length >1'>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 30, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="cardIdList.length">
      </el-pagination>
    </div>

    <el-button type="primary"  @click="goList">提交</el-button>

  </div>
</template>

<script>
  import {api} from 'api/coupon/index.js'
  import {formRules} from '../config.js'
  import {data as tempData} from '../temp.js'
    export default {
      components:{
      },
      data(){
        return{
          postCodeIds:api.postCodeIds,//请求URL地址
          titleMsg:['卡券管理','卡券列表','创建卡券','兑换卡'],
          rules:formRules,//判断规则
          multiple:false,
          headers:{
          },
          cardId:this.$route.query.cardId ,//
          fileList:[],
          formData:{//表单数据
            card_id:this.$route.query.cardId ,
          },
          currentPage:1,//当前页数
          pageSize:20,//每页显示
          cardIdList:[],
          showCardIdList:null,
        }
      },
      methods:{
        handleSuccess(resp,file, fileList) {//导入成功
          console.log('handleSuccess',resp, file, fileList);
          if(resp && resp.resultCode=='200'){
            this.cardIdList = resp.result;
            this.setShowCardList()
          }else{
            alert(resp.result)
            this.$refs.upload.clearFiles()
          }
        },
        handleError(err,file, fileList) {//导入失败
          console.log('handleError', err, file,fileList);
        },
        setShowCardList(){
          let arr = this.cardIdList,
                page = this.currentPage,
                size = this.pageSize;
            // console.log(`page:${page}`, `size:${size}`, arr)
            arr = arr.slice((page-1)*size, page*size)
            this.showCardIdList =  arr
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          this.currentPage = 1;
          this.pageSize = val
          this.setShowCardList()
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.currentPage = val;
          this.setShowCardList()
        },
        goList(){
          if(this.cardIdList && this.cardIdList.length >0){
            alert('提交成功！')
            this.$router.push({name:'couponList'})
          }else{
            alert('请导入excel文档！')
          }
        }
      },
      created(){
        this.$emit('setTitleMsg', this.titleMsg)
        this.$emit('setStepsArr', 1)
        this.$emit('setStepActive', 3)
        this.setShowCardList()
      },
      mounted(){
        
      },
    }
</script>